<template>
	<view class="tab-view f-bc-whilte f-frowspcen" :style="customStyle">
		<view class="tab-bar-item" v-for="(item, index) in tabArr" :key="index" :class="[tabIndex == index ? 'active' : '']" @tap="selectItem(index)">
			<text>{{ item }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		tabArr: {
			type: Array,
			default: []
		},
		customStyle: {
			type: String,
			default: ''
		},
		tabIndex: {
			type: Number,
			default: ''
		}
	},
	methods: {
		selectItem(index) {
			const that = this;
			that.$emit('change', { detail: { current: index } });
		}
	}
};
</script>

<style lang="scss" scoped>
.tab-view {
	position: relative;
	z-index: 11;
	box-shadow: 0px 4px 13px 0px rgba(28, 30, 33, 0.08);
	.tab-bar-item {
		width: 134rpx;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		color: $uni-text-color-grey;
	}
	.tab-bar-item.active {
		position: relative;
		color: $uni-text-color-red;
		font-weight: 650;
	}
	.tab-bar-item.active::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		display: inline-block;
		width: 100%;
		height: 4rpx;
		background-color: $uni-text-color-red;
	}
}
</style>
